<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="/WEB-INF/taglib/wms2kml" prefix="wms2kml"%>
<c:if test="${empty sessionScope.capabilities}">
    <%-- Redirect to the home page --%>
    <c:redirect url="/"/>
</c:if>
<c:set var="numLayersSelectedSpanId" value="numSelectedLayers"/>
<c:set var="numOverlaysSelectedSpanId" value="numSelectedOverlays"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Choose options...</title>
        
        <!-- For the tree control: TODO: download and serve locally --> 
        <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.4.0/build/treeview/assets/skins/sam/treeview.css">
        <!-- TODO: store these images locally -->
        <style type="text/css">
            .ygtvcheck0 { background: url(http://developer.yahoo.com/yui/examples/treeview/assets/img/check/check0.gif) 0 0 no-repeat; width:16px; cursor:pointer }
            .ygtvcheck1 { background: url(http://developer.yahoo.com/yui/examples/treeview/assets/img/check/check1.gif) 0 0 no-repeat; width:16px; cursor:pointer }
            .ygtvcheck2 { background: url(http://developer.yahoo.com/yui/examples/treeview/assets/img/check/check2.gif) 0 0 no-repeat; width:16px; cursor:pointer }
        </style>
        <script src="http://yui.yahooapis.com/2.4.0/build/yahoo/yahoo-min.js"></script>
        <script src="http://yui.yahooapis.com/2.4.0/build/event/event-min.js"></script>
        <script src="http://yui.yahooapis.com/2.4.0/build/treeview/treeview-min.js"></script>
        
        <script src="js/TaskNode.js"></script>
        <script type="text/javascript">
            // The data that will populate the tree is generated from the
            // Capabilities document
            var treeData = <wms2kml:jsLayer layer="${sessionScope.capabilities.rootLayer}"/>;
            var tree = null;
            
            window.onload = function() {
                tree = new YAHOO.widget.TreeView('tree');
                // We keep track of the selected displayable layers
                tree.selectedLayers = [];
                tree.numSelectedOverlays = 0;
                
                // Register a listener for checking or unchecking of boxes
                tree.subscribe('checkStateChanged', function(node) {
                    // We are only interested in displayable layers
                    if (typeof node.data.id != 'undefined') {
                        if (node.checked) {
                            // Add this node to the selected layers
                            tree.selectedLayers.push(node.data);
                            tree.numSelectedOverlays += node.data.numOverlays;
                        } else {
                            // Remove this node from the selected layers
                            var i = 0;
                            while (i < tree.selectedLayers.length) {
                                if (tree.selectedLayers[i].id == node.data.id) {
                                    tree.numSelectedOverlays -= tree.selectedLayers[i].numOverlays;
                                    tree.selectedLayers.splice(i, 1);
                                } else {
                                    i++;
                                }
                            }
                        }
                    }
                    document.getElementById('${numLayersSelectedSpanId}').innerHTML = tree.selectedLayers.length;
                    document.getElementById('${numOverlaysSelectedSpanId}').innerHTML = tree.numSelectedOverlays;
                });
                
                // Add the root node
                var rootNode = new YAHOO.widget.TaskNode(
                    treeData,
                    tree.getRoot(),
                    true, // show expanded
                    false // show unchecked
                );
                
                // Recursively add child nodes
                addNodes(rootNode, treeData.children);
                tree.draw();
            }
            
            function addNodes(parentNode, layers) {
                for (var i = 0; i < layers.length; i++) {
                    // The treeview control uses the layer.label string for display
                    var newNode = new YAHOO.widget.TaskNode(
                        layers[i],
                        parentNode,
                        false, // show collapsed
                        false // show unchecked
                    );
                    if (typeof layers[i].children != 'undefined') {
                        //newNode.multiExpand = false;
                        addNodes(newNode, layers[i].children);
                    }
                }
            }
            
            function submitForm(form) {
                var layerIds = [];
                for (var i = 0; i < tree.selectedLayers.length; i++) {
                    layerIds.push(tree.selectedLayers[i].id);
                }
                // We know it's safe to use commas to delimit layer names because
                // this is done in the GetMap operation.
                form.layers.value = layerIds.join(',');
                if (tree.numSelectedOverlays > 100) {
                    alert("Sorry, at the moment you can't generate KML with more than 100 overlays");
                    return false; // prevent the form from being submitted
                }
                return true; // The form will be submitted
            }
        </script>
    </head>
    <body>

    <h1>Select layers to include in the generated KML</h1>
    
    <p>Total number of displayable layers: ${sessionScope.capabilities.numDisplayableLayers}<br />
    Total number of possible overlays: ${sessionScope.capabilities.numOverlays} (including z and t dimensions)</p>
    
    <p>Number of selected layers: <span id="${numLayersSelectedSpanId}">0</span><br />
    Number of selected overlays: <span id="${numOverlaysSelectedSpanId}">0</span> (including z and t dimensions)</p>
    
    <form action="Cap2KML/generateKML" method="POST" name="form1" onsubmit="return submitForm(this);">
        <button
            type="submit"
            name="submitButton"
            title="Press to generate KML for the selected layers">Generate KML</button>
        <!-- This field will be populated by the submitForm() function, based on
             the layers that are selected in the tree -->
        <input type="hidden" name="layers" value=""/>
    </form>
    
    <%-- TODO: grey out layers that don't support lat-lon projection --%>
    
    <!-- This will hold the Yahoo UI tree control for selecting layers -->
    <div id="tree"></div>
    
    </body>
</html>
